<template>
  <!-- Hero区域 -->
  <div class="relative h-80 mt-16 overflow-hidden border-solid outline-red outline" :style="{background: bgColor}">
    <Carousel autoplay @on-change="autoChange" arrow="never" :autoplaySpeed="30000">
      <CarouselItem v-for="(item, index) in elements" :key="index" class="h-80">
        <div class="relative h-80">
          <img :src="item.url"
            class="w-full h-80 object-cover object-top"
            alt="hero background"
          />
          <div class="absolute inset-0 bg-gradient-to-r from-black/50 to-transparent">
            <div class="relative max-w-7xl mx-auto px-4 h-full flex items-center">
              <div class="max-w-2xl text-white">
                <h1 class="font-[Playfair_Display] text-5xl font-bold mb-6 italic tracking-wide" >
                  {{ item.title }}
                </h1>
                <p class="font-[Lora] text-xl mb-8 tracking-wide">
                  {{ item.desc }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </CarouselItem>
    </Carousel>
  </div>
</template>

<script>

export default {
  name: 'modelCarousel3',
  props: ['data'],
  data () {
    return {
      showModal: false, // modal显隐
      selected: null, // 已选数据
      picModelFlag: false, // 选择图片modal
      bgColor: '#fff', // 轮播背景色
      elements: [
        // {
        //   url: 'https://ai-public.mastergo.com/ai/img_res/295990ab21017251dfc7ad90be37da1d.jpg',
        //   title: '探索世界的每个角落',
        //   desc: '让我们带您开启一段难忘的旅程，体验不同的文化与风景。精心策划的行程，专业的服务团队，为您打造完美的旅行体验。'
        // },
        {
          url: 'https://ai-public.mastergo.com/ai/img_res/12bcfcb34c7976dfbb68b9a9f248ae5d.jpg',
          title: '遇见最美的风景',
          desc: '让我们带您开启一段难忘的旅程，体验不同的文化与风景。精心策划的行程，专业的服务团队，为您打造完美的旅行体验。'
        },
        // {
        //   url: 'https://ai-public.mastergo.com/ai/img_res/f530d49bd2b591237e9a4c7340804e83.jpg',
        //   title: '探寻文明印记',
        //   desc: '从希腊蓝白小镇到日本樱花季，从马尔代夫海滩到瑞士雪山，带您邂逅地球上最动人的景色。'
        // },
      ]
    };
  },
  mounted () {
    //this.bgColor = this.data.options.list[0].bgColor
  },
  methods: {
    // 自动切换时改变背景色
    autoChange (oVal, val) {
      //this.bgColor = this.elements[val].bgColor
    }
  }
};
</script>

<style scoped lang="scss">
.model-carousel1 {
  width: 100%;
  height: 470px;
  background: #fff;
}

/*大的导航信息，包含导航，幻灯片等*/
.nav-body {
  width: 1200px;
  height: 470px;
  margin: 0px auto;
}
.nav-side {
  height: 470px;
  width: 200px;
  padding: 0px;
  color: #fff;
  line-height: 470px;
  text-align: center;
  position: absolute;
  z-index: 1;
}

/*导航内容*/
.nav-content {
  width: 1200px;
  height: 470px;
  overflow: hidden;
  float: left;
  position: relative;
}
</style>
